<template>
	<view class="uni-flex main" style="align-items: center;flex-direction: column;">
		<image style="flex: 1;" class="uni-flex-item" src="../../../static/img/headlogo.jpg" mode="aspectFit"></image>
		<form @submit="bindingNoExists" class="uni-flex-item uni-flex" style="flex: 3;align-items: center;flex-direction: column;padding-top: 120rpx;">
			<view class="uni-form-item">
				<input class="uni-input" name="name" type="text" confirm-type="next" placeholder="请输入您的用户名" />
			</view>
			<view class="uni-form-item with-fun uni-flex" style="justify-content: center;">
				<input class="uni-input" name="password" placeholder="请输入密码" confirm-type="next" :password="showPassword" />
			</view>
			<view class="uni-form-item with-fun uni-flex" style="justify-content: center;">
				<input class="uni-input" name="checkPassword" placeholder="请确认密码" confirm-type="next" :password="showPassword" />
				<view class="uni-icon uni-icon-eye" style="padding-top: 3%;" :class="[!showPassword ? 'uni-active' : '']" @click="changePassword"></view>
			</view>
			<view class="uni-form-item with-fun uni-flex" style="justify-content: center;">
				<input class="uni-input" name="email" placeholder="请输入您的邮箱" confirm-type="done" />
			</view>
			<view class="uni-form-item"><button type="default" plain="true" style="width: 100%;" form-type="submit">注册</button></view>
			<view class="uni-form-item"><button type="default" plain="true" style="width: 100%;" form-type="reset">重置</button></view>
		</form>
	</view>
</template>

<script>
	var graceChecker = require('../../../common/graceChecker.js'),
		_self;
	export default {
		data() {
			return {
				showPassword: true
			}
		},
		created() {
			_self = this;
		},
		methods: {
			changePassword: function() {
				this.showPassword = !this.showPassword;
			},
			bindingNoExists: function(e) {
				var formdata = e.detail.value;
				var rule = [
					{ name: 'name', checkType: 'notnull', checkRule: '', errorMsg: '请填写您的用户名' },
					{ name: 'password', checkType: 'same', checkRule: formdata.checkPassword, errorMsg: '俩次密码不一致' },
					{ name: 'email', checkType: 'email', checkRule: '', errorMsg: '请填写您的邮箱' }
				];
				var checkRes = graceChecker.check(formdata, rule);
				if (checkRes) {
					uni.showLoading({
						mask: true,
						title: '正在注册绑定中...'
					})
					const qq = uni.getStorageSync('qq')
					uni.request({
						url: _self.websiteUrl + '/qq/binding/noexists',
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						data: {"name": formdata.name, "password": formdata.password, "openId": qq.openId, "email": formdata.email},
						success: (t) => {
							if (t.data.status === 200 && t.data.success === true) {
								uni.setStorageSync("token", t.data.payload);
								uni.hideLoading();
								uni.showToast({
									title: '注册绑定成功',
									icon: 'success',
									duration: 1000
								})
								setTimeout(function() {
									uni.reLaunch({
										url: '../../person/index'
									})
								}, 1000)
							} else {
								uni.hideLoading();
								uni.showToast({
									icon: 'none',
									title: t.data.msg
								})
							}
						},
						fail: (t) => {
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								title: t.data.msg
							})
						}
					})
				} else {
					uni.showToast({ title: graceChecker.error, icon: 'none', image: '../../static/error.png' });
				}
			}
		}
	}
</script>

<style>
page {
	height: 100%;
}

.with-fun {
	display: flex;
	flex-wrap: nowrap;
}
.with-fun .uni-icon {
	width: 40px;
	flex-shrink: 0;
	background: #ffffff;
}
.main {
	background-color: #fd823d !important;
	width: 100%;
	height: 100%;
}
</style>
